<template>
  <basic-dialog
    fullscreen
    title="图文完善"
    :visible="visible"
    :showFooter="false"
    :handleClose="handleClose"
  >
    <div class="btn-header">
      <el-divider content-position="right">
        <el-button
          type="text"
          @click="handleSubmit"
        >提交</el-button>
      </el-divider>
    </div>
    <ImageText
      ref="imageRef"
      :data-source="dataSource"
      :rules="isRequire ? requireRules : null"
    />
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import ImageText from '@/pages/commodity/temporaryManage/components/ImageText';
import { isResponseSuccess } from '@/utils/bizUtils';
import { saveImageInfoService } from '@/api/commodity/temporaryPurchasingGoods/latentProductRecord';

export default {
  components: {
    BasicDialog,
    ImageText
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    imageInfo: {
      type: Object,
      default: () => ({})
    },
    isRequire: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      dataSource: {},
      requireRules: {
        mainImageTrimming: { required: true, message: '商品主图片（精修）不能为空' },
        multiImageTrimming: { required: true, message: '商品多角度图（精修）不能为空' }
      },
      btnLoading: {
        submit: false
      }
    }
  },
  watch: {
    imageInfo: {
      handler (data) {
        this.dataSource = { ...data }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    // 提交
    handleSubmit () {
      this.isRequire
      ? this.$refs.imageRef.validateImgTextInfo(this.submitImageInfo)
      : this.submitImageInfo()
    },
    // 关闭
    handleClose () {
      this.dataSource = {}
      this.$refs.imageRef.clearAllState()
      this.$emit('update:visible', false)
    },
    // 提交图文信息
    async submitImageInfo () {
      const imageInfo = this.$refs?.imageRef?.getImageInfo() ?? {}
      const data = {
        ...imageInfo,
        recordDetailUuid: this.recordDetailUuid
      }
      const loadingFn = state => { this.btnLoading.submit = state }
      const res = await saveImageInfoService(data, loadingFn)
      if (isResponseSuccess(res)) {
        this.$message.success('操作成功')
        this.$emit('success')
        this.handleClose()
      }
    },
  }
}
</script>
<style lang="less" scoped>
/deep/ .el-dialog__header {
  position: fixed;
  width: 100%;
  z-index: 1000;
  background-color: #fff;
}
.btn-header {
  position: fixed;
  width: 100%;
  z-index: 1000;
  background-color: #fff;
  top: 55px;
  right: 20px;
}
.image_wrap {
  padding-top: 100px;
}
</style>
